<!--
 * @Descripttion: 版权配置
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 18:38:33
-->
<template>
  <div class="lb-sys-copyright">
    <top-nav></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="settingForm"
        :rules="settingFormRules"
        ref="settingForm"
        label-width="140px"
        class="setting-form"
      >
        <el-form-item label="版权" prop="copyright">
          <lb-cover
            :fileList="settingForm.copyright"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 193 * 87</lb-tool-tips>
        </el-form-item>
        <el-form-item label="文字版权" prop="logo_text">
          <el-input
            v-model="settingForm.logo_text"
            placeholder="请输入文字版权"
          ></el-input>
          <lb-tool-tips>小程序底部文字版权</lb-tool-tips>
        </el-form-item>
        <el-form-item label="版权显示" prop="logo_switch">
          <el-radio-group v-model="settingForm.logo_switch">
            <el-radio :label="0">图片版权</el-radio>
            <el-radio :label="1">文字版权</el-radio>
            <el-radio :label="2">图片加文字</el-radio>
            <el-radio :label="3">关闭版权</el-radio>
          </el-radio-group>
          <lb-tool-tips>小程序底部版权显示方式</lb-tool-tips>
        </el-form-item>
        <el-form-item label="点击版权" prop="click_copy_way">
          <el-radio-group v-model="settingForm.click_copy_way">
            <el-radio :label="1">拨打电话</el-radio>
            <el-radio :label="2">跳转网页</el-radio>
            <el-radio :label="3">跳转小程序</el-radio>
            <el-radio :label="4">查看大图</el-radio>
          </el-radio-group>
          <lb-tool-tips>小程序底部版权点击时产生的效果</lb-tool-tips>
        </el-form-item>
        <el-form-item label="点击内容" prop="click_copy_content">
          <el-input
            v-model="settingForm.click_copy_content"
            placeholder="请输入内容"
          ></el-input>
          <lb-tool-tips
            >点击版权信息选择的是拨打电话、跳转网页、跳转小程序时，这里需要填上对应的电话号码、外部网址、小程序的appid</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="点击大图" prop="click_copy_show_img">
          <lb-cover
            :fileList="settingForm.click_copy_show_img"
            @selectedFiles="selectedBigImg"
          >
          </lb-cover>
          <lb-tool-tips>图片建议尺寸: 750 * n</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo('settingForm')">{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      settingForm: {
        copyright: [],
        logo_text: '',
        logo_switch: 1,
        click_copy_way: 1,
        click_copy_content: '',
        click_copy_show_img: []
        // mini_app_name: ''
      },
      settingFormRules: {
        copyright: { required: true, message: '请上传版权图片', trigger: 'change' },
        logo_text: { required: true, type: 'string', message: '请输入版权文字', trigger: 'blur' },
        logo_switch: { required: true, message: '请选择版权显示', trigger: 'change' },
        click_copy_way: { required: true, message: '请选择点击版权的方式', trigger: 'change' },
        click_copy_content: { required: true, type: 'string', message: '请输入点击内容', trigger: 'blur' },
        click_copy_show_img: { required: true, message: '请上传大图', trigger: 'change' }
        // mini_app_name: {required: true, type: 'string', message: '请输入小程序名', trigger: 'blur'}
      }
    }
  },
  created () {
    this.getFormInfo()
  },
  methods: {
    ...mapMutations(['changeRoutesItem']),
    getFormInfo () {
      this.$api.getAppminiConfigInfo().then(res => {
        if (res.code === 200) {
          for (let key in this.settingForm) {
            this.settingForm[key] = res.data[key]
          }
          this.settingForm.copyright = [{ url: res.data.copyright }]
          this.settingForm.click_copy_show_img = [{ url: res.data.click_copy_show_img }]
        }
      })
    },
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let { settingForm } = this
          let subForm = JSON.parse(JSON.stringify(settingForm))
          subForm.copyright = settingForm.copyright[0] ? settingForm.copyright[0].url : ''
          subForm.click_copy_show_img = settingForm.click_copy_show_img ? settingForm.click_copy_show_img[0].url : ''
          this.$api.setAppminiConfigInfo({ app_config: subForm }).then(res => {
            if (res.code === 200) {
              this.changeRoutesItem({ key: 'logo', val: subForm.copyright })
              this.$message.success(this.$t('tips.successSub'))
            }
          })
        }
      })
    },
    handleRemoveImg (imgs) {
      console.log(imgs)
      this.copyright = imgs
    },
    getCover (imgs) {
      console.log(imgs)
      this.settingForm.copyright = imgs
    },
    selectedBigImg (img) {
      this.settingForm.click_copy_show_img = img
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-sys-copyright {
  width: 100%;
  .setting-form {
    .el-input {
      width: 300px;
    }
  }
}
</style>
